<template>
  <div class="app-container">
    <el-form ref="formData" :model="formData" label-position="left" label-width="70px">
      <el-form-item v-show="true" label="ID">
        <el-input v-model="formData._id" :disabled="IdDisabled" />
      </el-form-item>
      <el-form-item v-show="!isEdit" label="日期" prop="date">
        <el-date-picker v-model="date" type="date" placeholder="选择日期" @change="handleDateChange" />
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" />
      </el-form-item>
      <el-form-item label="列表头图" prop="indexImage">
        <el-select v-model="formData.indexImageId" placeholder="请选择">
          <el-option
            v-for="item in indexImgList"
            :key="item._id"
            :label="item.title"
            :value="item._id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-image :src="indexImageCom" style="width: 200px; height: 100px" :preview-src-list="[formData.indexImage]" />
      </el-form-item>
      <el-form-item label="经文选择">
        <el-select v-model="formData.jw_Id" filterable placeholder="请选择">
          <el-option
            v-for="item in jinWenList"
            :key="item._id"
            :label="item.chTitle"
            :value="item._id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-show="formData.jw_Id !== -1" v-model="currentJwContent" type="textarea" :rows="7" disabled />
      </el-form-item>
      <el-form-item label="赞美音频">
        <audio controls :src="currentZMadUrl" stle="width:100%;max-width:600px;" />
      </el-form-item>
      <el-form-item label="赞美选择">
        <el-select v-model="formData.zm_Id" filterable placeholder="请选择">
          <el-option
            v-for="item in srzmList"
            :key="item._id"
            :label="item.mulu"
            :value="item._id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="中文音频">
        <audio controls :src="formData.wrapper[0].audioUrl" stle="width:100%;max-width:600px;" />
      </el-form-item>
      <el-form-item label="上传中文音频">
        <file-heaper id="wrapperChad" @fileheaperchange="handWrapperCHad" />
      </el-form-item>
      <el-form-item label="中文图片">
        <img-heper id="handWrapperCHImg" :src="formData.wrapper[0].imgUrl" @imgheaperchange="handWrapperCHImg" @imgheaperclose="handWrapperCHImgClose" />
      </el-form-item>
      <el-form-item label="英文音频">
        <audio controls :src="formData.wrapper[1].audioUrl" stle="width:100%;max-width:600px;" />
      </el-form-item>
      <el-form-item label="上传英文音频">
        <file-heaper id="handWrapperENad" @fileheaperchange="handWrapperENad" />
      </el-form-item>
      <el-form-item label="英文图片">
        <img-heper id="handWrapperENImg" :src="formData.wrapper[1].imgUrl" @imgheaperchange="handWrapperENImg" @imgheaperclose="handWrapperENImgClose" />
      </el-form-item>
      <el-form-item>
        <el-button @click="$router.push('hdList')">返回</el-button>
        <el-button type="primary" @click="updateData()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { loadingFull, dateFormat } from '@/cloudbaseapi/cloudbase-api'
import { Message } from 'element-ui'
import { getItem, getJwItems, getIndexImg, getJwItem, getSrZmList, update, getSrZmItemId } from '@/cloudbaseapi/cloudbase-hd'
import ImgHeper from '@/components/ImgHeper/index'
import FileHeaper from '@/components/FileHeaper/index'
export default {
  components: { ImgHeper, FileHeaper },
  // eslint-disable-next-line vue/require-prop-types
  props: ['isEdit'],
  data() {
    return {
      formData: {
        _id: '',
        indexImage: '',
        jw_Id: -1,
        title: '',
        wrapper: [
          { audioUrl: '', imgUrl: '', sort: 1, title: '' },
          { audioUrl: '', imgUrl: '', sort: 2, title: '' }],
        zm_Id: -1,
        indexImageId: -1
      },
      jinWenList: [],
      indexImgList: [],
      currentJwContent: '',
      currentZMadUrl: '',
      srzmList: [],
      IdDisabled: true,
      date: ''
    }
  },
  async activated() {
    this.init()
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    indexImageCom() {
      const res = this.indexImgList.filter(item => {
        // eslint-disable-next-line eqeqeq
        return item._id == this.formData.indexImageId
      })
      if (res.length) {
        const data = res[0]
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.formData.indexImage = data.url
        return data.url
      }
    }
  },
  watch: {
    'formData.jw_Id': function(val) {
      if (val !== '') {
        getJwItem(val).then(res => {
          const data = res.data[0]
          this.currentJwContent = data['chTitle'] + '\n' + data['chContext'] + '\n' + data['enTitle'] + '\n' + data['enContext']
        })
      }
    },
    'formData.zm_Id': function(val) {
      getSrZmItemId(val).then(res => {
        const data = res.data[0]
        this.currentZMadUrl = data['dmtUrl']['adUrl']
      })
    }
  },
  methods: {
    async init() {
      const load = loadingFull()
      if (this.isEdit) {
        const id = parseInt(this.$route.query.id)
        const data = await getItem(id)
        this.formData = data.data[0]
      }
      const jinwenlistData = await getJwItems()
      this.jinWenList = [{ _id: -1, chTitle: '请选择' }, ...jinwenlistData.data]
      const indexImgListData = await getIndexImg()
      this.indexImgList = [{ _id: -1, title: '请选择', url: '' }, ...indexImgListData.data]
      const srzmList = await getSrZmList()
      this.srzmList = [{ _id: -1, mulu: '请选择' }, ...srzmList.data]
      setTimeout(() => {
        load.close()
      }, 500)
    },
    updateData() {
      const load = loadingFull()
      update(this.formData, this.isEdit ? 'edit' : 'create').then(res => {
        setTimeout(() => {
          load.close()
        }, 500)
        Message({
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
      }).catch(err => {
        console.log(err)
        setTimeout(() => {
          load.close()
        }, 500)
        Message({
          message: '保存失败',
          type: 'error',
          duration: 2000
        })
      })
    },
    handWrapperCHad(val) {
      this.formData.wrapper[0].audioUrl = val
    },
    handWrapperENad(val) {
      this.formData.wrapper[1].audioUrl = val
    },
    handWrapperCHImg(val) {
      this.formData.wrapper[0].imgUrl = val
    },
    handWrapperENImg(val) {
      this.formData.wrapper[1].imgUrl = val
    },
    handWrapperCHImgClose() {
      this.formData.wrapper[0].imgUrl = ''
    },
    handWrapperENImgClose() {
      this.formData.wrapper[1].imgUrl = ''
    },
    handleDateChange(val) {
      this.formData._id = dateFormat(val, 'yyyyMMdd')
    }
  }
}
</script>

<style scoped>

</style>
